<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>梦幻雪冰 - 利用vue实现Tab切换</title>
    <link rel="stylesheet" type="text/css" href="http://css.h5course.cn/reset-1.0.0.css" />
    <script src="http://js.h5course.cn/vue.js" type="text/javascript"></script>
    <style type="text/css">
        .wrap {
            width: 450px;
            margin: 0 auto;
        }
        .tab-tit span {
            float: left;
            width: 150px;
            height: 60px;
            background-color: pink;
            text-align: center;
            line-height: 60px;
            cursor: pointer;
        }
        .tab-con div {
            display: none;
            height: 200px;
            background-color: gray;
        }
        /*tab标题点击选中样式*/
        .tab-tit .select {
            background-color: skyblue;
        }
        /*tab内容显示样式*/
        .tab-con .show {
            display: block;
        }
    </style>
</head>
<body>
    <div class="wrap" id="app">
        <div class="tab">
            <div class="tab-tit clearfix">
                <span v-for="(item, index) in items" :class="{select: activeIndex === index}" @click="tabHandler(index)">{{item.title}}</span>
            </div>
            <div class="tab-con clearfix">
                <div class="show">{{items[activeIndex].content}}</div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                activeIndex: 0,
                items: [
                    {title: 'HTML5', content: '这是HTML5内容'},
                    {title: 'HTML5学堂', content: '我在这里'},
                    {title: 'JavaScript', content: '这是JavaScript内容'}
                ]
            },
            methods: {
                tabHandler: function(index) {
                    this.activeIndex = index;
                }
            }
        });
    </script>
</body>
</html>
